<template>
    <div class="banner">
        <div class="wrap">
            <ul>
                <li :class="setPicNum(index)" v-for="(item,index) in banners" :key="index">
                    <a :href="item.url">
                        <img :src="item.imageUrl" alt="">
                    </a>
                </li>
            </ul>
            <div class="dots">
                <b :class="setPicNum(index)" v-for="(item,index) in banners" :key="index"></b>
            </div>
            <div class="arrowLeft" @click="changePic('prev')"></div>
            <div class="arrowRight" @click="changePic('next')"></div>
        </div>
    </div>
</template>

<script>
import request from '../network/request'
export default {
    name:'Banner',
    data() {
        return {
            banners:null,
            picNum:0
        }
    },
    computed:{
        setPicNum(){
            
            return function(index){
                return index==this.picNum?'current':''
            }
        }
    },
    created(){
        request({url:'/banner'})
        .then(res=>{
            this.banners=res.data.banners
            // console.log(this.banners);
        })
    },
    methods:{
        changePic(type){
            if(type=='next'){
                if(this.picNum<this.banners.length-1){
                    this.picNum++
                }else{
                    this.picNum=0
                }
            }else if(type='prev'){
                if(this.picNum>0){
                    this.picNum--
                }else{
                    this.picNum=this.banners.length-1
                }
            }
        }
    }
}
</script>

<style lang="scss">
    .banner{
        width: 100%;
        height: 280px;
        background: #dedede;
        .wrap{
            width: 980px;
            height: 280px;
            margin: 0 auto;
            position: relative;
            ul{
                height: 100%;
                position: relative;
                li{
                    position: absolute;
                    transition: .3s;
                    img{
                        width: 100%;
                        height: 280px;
                    }
                    &.current{
                        z-index: 2;
                    }
                }
            }
            .dots{
                display: flex;
                justify-content: center;
                position: absolute;
                bottom: 0px;
                left: 50%;
                z-index: 3;
                transform: translateX(-50%);
                b{
                    width: 10px;
                    height: 10px;
                    margin: 10px;
                    border-radius: 50%;
                    background: rgb(219, 219, 219);
                    &.current{
                        background: rgb(226, 7, 7);
                    }
                }
            }
            .arrowLeft,.arrowRight{
                width: 37px;
                height: 63px;
                position: absolute;
                top: calc(50% - 31px);
                &:hover{
                    cursor: pointer;
                }
            }
            .arrowLeft{
                left: -50px;
                background: url('../assets/arrl.png');
                &:hover{
                    background: url('../assets/arrl_hvr.png');
                }
            }
            .arrowRight{
                right: -50px;
                background: url('../assets/arrr.png');
                &:hover{
                    background: url('../assets/arrr_hvr.png');
                }
            }
        }
    }
</style>